<template>
    <div>
        <div class="plugins-tips">
            项目构建:设计项目模板
        </div>
        <div class="add-tab-container" @mouseover="showInput = true" @mouseleave="showInput = false">
            <transition name="expand">
                <el-input v-show="showInput" v-model="inputValue" class="slide-input" placeholder="输入Tab标题"
                    ref="inputRef" />
            </transition>
            <el-button type="primary" @click="addTab">
                新 增
            </el-button>
        </div>
        <div class="tabs-main">
            <el-tabs type="border-card" v-model="selectedTabsValue" class="project-tabs" @tab-click="selectTabs"
                closable @tab-remove="removeTab" v-if="editableTabs.length > 1">
                <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                    {{ item.content }}
                </el-tab-pane>
            </el-tabs>
            <el-tabs type="border-card" v-model="selectedTabsValue" class="project-tabs" @tab-click="selectTabs" v-else>
                <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                    {{ item.content }}
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const showInput = ref(false)
let inputRef = ref(null)
let inputValue = ref('')

let tabIndex = 2
const selectedTabsValue = ref('1')
const editableTabs = ref([
    {
        title: '需求阶段',
        name: '1',
        content: '需求阶段内容',
    },
    {
        title: '设计阶段',
        name: '2',
        content: '设计阶段内容',
    },
])

const selectTabs = (tab, event) => {
    console.log(tab, event)
}

// 新增tabs页面
const addTab = () => {
    const newTabName = `${++tabIndex}`
    const newTabTitle = inputValue.value || 'New Tab'
    editableTabs.value.push({
        title: newTabTitle,
        name: newTabName,
        content: 'New Tab content',
    })
    selectedTabsValue.value = newTabName
    inputValue.value = '' // 清空输入框的值
    //showInput.value = false // 隐藏输入框    
}

// 移除tabs页面
const removeTab = (targetName) => {
    const tabs = editableTabs.value
    let activeName = selectedTabsValue.value
    if (activeName === targetName) {
        tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
                const nextTab = tabs[index + 1] || tabs[index - 1]
                if (nextTab) {
                    activeName = nextTab.name
                }
            }
        })
    }
    selectedTabsValue.value = activeName
    editableTabs.value = tabs.filter(tab => tab.name !== targetName)
}
</script>

<style lang="scss" scoped>
.plugins-tips {
    background: rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.add-tab-container {
    display: flex;
    align-items: center;
    position: relative;

    .slide-input {
        flex-shrink: 0;
        width: 200px;
        /* Set the target width */
        transition: width 1s;
        /* Change the transition duration to 2 seconds */
        margin-right: 10px;
    }

    .el-button {
        transition: margin-left 1s;
        /* Change the transition duration to 2 seconds */
        margin-left: 0;
    }
}

/* Transition styles */
.expand-enter-active,
.expand-leave-active {
    transition: width 1s, margin-left 1s;
}

.expand-enter-from,
.expand-leave-to {
    width: 0 !important;
    /* Start and end with 0 width */
    margin-left: 0 !important;
    /* Start and end with 0 margin-left */
}

.expand-enter-active .el-input__inner,
.expand-leave-active .el-input__inner {
    transition: width 1s;
    /* Transition for the inner input element */
}

.expand-enter-from .el-input__inner,
.expand-leave-to .el-input__inner {
    width: 0 !important;
    /* Start and end with 0 width for the inner input element */
}

.tabs-main {
    margin: 20px 0;

    .project-tabs {

        //新版vue3弃用::v-deep ,使用新的:deep()
        :deep(.el-tabs__content) {
            padding: 32px;
            color: #6b778c;
            font-size: 32px;
            font-weight: 600;
        }
    }
}
</style>
